<template>
  <div>
    <el-tag type="info" effect="light" round @click="search"> {{ title }} </el-tag>
    <MkDialog title="患者历史复核信息" v-model="dialogVisible" width="70%" buttons="close">
      <MkTable :data="tableData" :fit="true" v-loading="ctx.loading" max-height="400">
        <MkColumnIndex />
        <MkColumn prop="id" label="单号" />
        <el-table-column label="患者信息" min-width="500px">
          <template #default="{ row }">
            <MkPatient :model-value="row" style="padding: 0;" />
          </template>
        </el-table-column>
        <MkColumn prop="aboFuHeJieGuo" label="复核ABO" :col="0.6" />
        <MkColumn prop="rhDFuHeJieGuo" label="复核RhD" :col="0.6" />
        <MkColumn prop="kangShaiJieGuo" label="抗筛结果" :col="0.6" />
        <MkColumnBasEntity entity="SysUser" prop="jianYanRenId" label="检验人" :col="0.6" />
        <MkColumnBasEntity entity="SysUser" prop="fuJianRenId" label="复检人" :col="0.6" />
        <MkColumnDate prop="jianYanShiJian" label="检验时间" />
      </MkTable>
      <MkPagination v-model:page="ctx.page" v-model:pageSize="ctx.pageSize" :total="ctx.total" @query="search" />
    </MkDialog>
  </div>
</template>

<script lang='ts' setup>
defineOptions({
  name: 'MkLiShiFuHeTag'
})
import { HuanZheLiShiFuHeOutput, TraShenQingApi } from '/@/api/tra/TraShenQing';
import { isNull } from '/@/utils';

const props = defineProps({
  title: { type: String, default: '历史输血' },
  huanZheId: { type: String },
  zhuYuanHao: { type: String }
});

const dialogVisible = ref(false);
const tableData = ref<HuanZheLiShiFuHeOutput[]>([]);
const ctx = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
  loading: false
})
/** 检索 */
const search = async () => {
  if (isNull(props.huanZheId) && isNull(props.zhuYuanHao)) {
    tableData.value = []
    dialogVisible.value = true
    return
  }
  ctx.loading = true
  TraShenQingApi.checkLiShiFuHePage({
    huanZheId: props.huanZheId,
    zhuYuanHao: props.zhuYuanHao,
    page: ctx.page,
    pageSize: ctx.pageSize
  }).then(res => {
    tableData.value = res.items
    ctx.total = res.total
    dialogVisible.value = true;
  }).finally(() => {
    ctx.loading = false
  })
};
</script>